<template>
  <view class="position-collection">
    <!-- 空状态（默认展示，可根据需要切换） -->
    <view v-if="positionInformation.length === 0" class="empty-state">
      <text class="empty-state__text">暂无邀请</text>
    </view>

    <!-- 职位列表（默认展示示例数据，可直接写死） -->
    <view class="position-list">
      <!-- 职位卡片 -->
      <view class="position-card" v-for="(position, index) in positionInformation" :key="index">
        <!-- 职位名称与薪资 -->
        <view class="position-card__header">
          <text class="position-card__title">{{ position.positionName }}</text>
          <text class="position-card__salary">{{ position.salary }}</text>
        </view>

        <!-- 公司名称 -->
        <text class="position-card__company">{{ position.companyName }}</text>

        <!-- HR信息与沟通按钮 -->
        <view class="position-card__footer">
            <view class="position-card__hr">
              <image :src="position.hrAvatarUrl" class="position-card__hr-avatar"></image>
              <text class="position-card__hr-name">{{ position.respPerson }} · {{ position.respPos }}</text>
            </view>
            <!-- 将两个按钮包裹在独立容器中 -->
            <view class="action-buttons">
              <button type="button" class="delivery-btn" @click="openResumePopup(position)">
                <text class="delivery-btn__text">投递</text>
              </button>
			  <button class="refuse-btn">
			    <text class="refuse-btn__text">拒绝</text>
			  </button>
            </view>
          </view>
      </view>
    </view>
    <!-- 简历选择弹出框 -->
    <u-popup :show="showResumePopup" mode="bottom" border-radius="24" closeable @close="showResumePopup = false">
      <view class="resume-popup-container">
        <view class="popup-header">
          <text class="popup-title">选择简历</text>
          <text class="popup-subtitle">请选择要投递的简历</text>
        </view>
        
        <scroll-view scroll-y class="resume-list" :style="{maxHeight: '60vh'}">
          <view 
            class="resume-item" 
            v-for="(resume, index) in resumeList" 
            :key="resume.id"
            :class="{'resume-item--selected': selectedResumeId === resume.id}"
            @click="selectResume(resume)"
          >
            <view class="resume-item__left">
              <image src="/static/jianli.png" class="resume-icon"></image>
              <view class="resume-info">
                <text class="resume-name">{{ resume.name }}</text>
                <text class="resume-meta">{{ resume.uploadTime || '最近更新' }}</text>
              </view>
            </view>
            <view class="resume-item__right">
              <view class="selection-indicator" :class="{'selection-indicator--selected': selectedResumeId === resume.id}">
                <u-icon 
                  name="checkmark" 
                  size="16" 
                  color="#fff"
                  v-if="selectedResumeId === resume.id"
                ></u-icon>
              </view>
            </view>
          </view>
          
          <!-- 空状态 -->
          <view v-if="resumeList.length === 0" class="empty-resume">
            <u-icon name="file-text" size="48" color="#ddd"></u-icon>
            <text class="empty-text">暂无简历，请先上传</text>
          </view>
        </scroll-view>
        
        <view class="popup-footer">
          <u-button 
            type="primary" 
            shape="circle"
            size="large"
            @click="submitResume" 
            :disabled="!selectedResume"
            :custom-style="submitBtnStyle"
          >确认投递</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getJobByStudent, updateState } from "@/api/job.js";
import { getAttachment } from "@/api/attachmentResume.js";
import { modResumeSubmit } from "@/api/attachmentResume.js";

export default {
  data() {
    return {
      positionInformation: [],
      pageSize: 10,
      pageNum: 1,
      isLoadComplete: false,
      // 新增简历相关数据
      showResumePopup: false,
      resumeList: [],
      selectedResume: null,
      selectedResumeId: null,
      currentPosition: null // 当前要投递的职位
    };
  },
  computed: {
    submitBtnStyle() {
      return {
        width: '100%',
        height: '88rpx',
        fontSize: '32rpx',
        fontWeight: '500'
      };
    }
  },
  onShow() {},
  methods: {
    async queryJobInformation() {
      try {
        const res = await getJobByStudent(this.pageNum, this.pageSize);
        if (res.code === 200) {
          const newList = res.data.list || [];
          if (this.pageNum === 1) {
            this.positionInformation = newList;
          } else {
            this.positionInformation = [...this.positionInformation, ...newList];
          }
          newList.forEach(position => {
            this.$set(position, "moveX", 0);
            this.$set(position, "startX", 0);
            this.$set(position, "isMoving", false);
          });
          if (newList.length < this.pageSize) {
            this.isLoadComplete = true;
          }
        } else {
          console.error("获取收藏职位失败：", res.message);
        }
      } catch (error) {
        console.error("获取收藏职位出错：", error);
      }
    },
    
    // 打开简历选择弹窗
    openResumePopup(position) {
      console.log("点击了")
      console.log("showResumePopup =", this.showResumePopup);
      this.currentPosition = position;//记录当前要投递的职位（后续提交需用职位ID）
      this.loadResumeList();
      this.showResumePopup = true;
    console.log("showResumePopup =", this.showResumePopup);
    },
    
    // 加载简历列表
    async loadResumeList() {
      try {
        const res = await getAttachment(1, 10);
        if (res.code === 200) {
          this.resumeList = res.data.list || [];
        } else {
          uni.showToast({
            title: '获取简历列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error("获取简历列表出错：", error);
        uni.showToast({
          title: '获取简历列表失败',
          icon: 'none'
        });
      }
    },
    
    // 选择简历
    selectResume(resume) {
      this.selectedResume = resume;
      this.selectedResumeId = resume.id;
    },
    
    // 提交简历投递
    async submitResume() {
      if (!this.selectedResume || !this.currentPosition) {
        uni.showToast({
          title: '请选择简历',
          icon: 'none'
        });
        return;
      }
      
      try {
        uni.showLoading({
          title: '投递中...',
          mask: true
        });
        
        const res = await modResumeSubmit(this.currentPosition.id, this.selectedResume.id);
        
        uni.hideLoading();
        
        if (res.code === 200) {
          uni.showToast({
            title: '投递成功',
            icon: 'success'
          });
          this.showResumePopup = false;
          this.selectedResume = null;
          this.selectedResumeId = null;
          this.currentPosition = null;
          // 刷新职位列表
          this.pageNum = 1;
          this.queryJobInformation();
        } else {
          uni.showToast({
            title: res.message || '投递失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '投递失败',
          icon: 'none'
        });
        console.error("简历投递出错：", error);
      }
    }
  },
  mounted() {
    this.queryJobInformation();
  }
};
</script>

<style scoped>
/* 页面容器基础样式 */
.position-collection {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-bar__back {
  font-size: 28rpx;
  color: #333333;
  margin-right: 20rpx;
}

.nav-bar__title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  flex: 1;
  text-align: center;
}

/* 空状态样式（若需要默认展示空状态，可取消注释） */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200rpx;
}

.empty-state__img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-state__text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 40rpx;
}

.empty-state__btn {
  background-color: #00b42a;
  color: #ffffff;
  border-radius: 40rpx;
  padding: 15rpx 60rpx;
  font-size: 28rpx;
}

/* 职位列表容器 */
.position-list {
  padding: 15rpx;
}

/* 职位卡片样式 */
.position-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 以下为原有样式，保持不变 */
.position-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.position-card__title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.position-card__salary {
  font-size: 30rpx;
  color: #ff6700;
}

.position-card__company {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 25rpx;
}

.position-card__tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25rpx;
   margin-top: 25rpx; 
}

.position-card__tag {
  background-color: #f5f5f5;
  color: #999;
  font-size: 24rpx;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.position-card__footer {
  display: flex;
  justify-content: space-between; /* 修改为两端对齐 */
  align-items: center;
}

/* 新增按钮容器样式 */
.action-buttons {
  display: flex;
  gap: 15rpx; /* 按钮之间的缝隙 */
  margin-left: 15rpx; /* 向右移动按钮组 */
}

.position-card__hr {
  display: flex;
  align-items: center;
  margin-right: auto; /* 保持按钮右对齐 */
}

.position-card__hr-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.position-card__hr-name {
  font-size: 24rpx;
  color: #666;
}

.refuse-btn {
    width: 100rpx; /* 增加宽度以容纳文字 */
    height: 70rpx;
    border-radius: 50rpx; /* 高度的一半，形成椭圆形 */
    background-color: #FF0000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0 15rpx;
}

/* 添加文字样式 */
.refuse-btn__text {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
}

.delivery-btn{
    width: 100rpx; /* 增加宽度以容纳文字 */
    height: 70rpx;
    border-radius: 50rpx; /* 高度的一半，形成椭圆形 */
    background-color: #8FBC8F;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0 15rpx;
}

/* 添加文字样式 */
.delivery-btn__text {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
}

/* 添加详情按钮圆形样式 */
.detail-btn {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background-color: #b6ccd8; /* 使用蓝色作为区分 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
}

/* 相似岗位容器（父元素） */
.position-card__similar {
  display: flex;
  align-items: center; /* 保持垂直居中 */
  color: #999;
  font-size: 24rpx;
  /* 移除 justify-content: flex-end，避免影响子元素对齐 */
}/* 简历弹出框样式优化 - 更新后的样式 */
.resume-popup-container {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  padding: 40rpx 32rpx 24rpx;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.popup-subtitle {
  font-size: 28rpx;
  color: #999;
}

.resume-list {
  flex: 1;
  padding: 20rpx 32rpx;
}

.resume-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx; /* 从32rpx改为24rpx，更接近resume.vue的12px */
  margin-bottom: 16rpx; /* 从20rpx改为16rpx，与resume.vue一致 */
  background: #fff; /* 从#f8f9fa改为#fff，与resume.vue一致 */
  border-radius: 4rpx; /* 从16rpx改为4rpx，与resume.vue一致 */
  border: 1rpx solid #eee; /* 添加边框，与resume.vue一致 */
  transition: all 0.3s ease;
}

.resume-item:active {
  transform: scale(0.98);
}

.resume-item--selected {
  background: #d4edda; /* 更深的绿色背景 */
  border: 2rpx solid #28a745; /* 更深的绿色边框 */
}

.resume-item__left {
  display: flex;
  align-items: center;
  flex: 1;
}

.resume-icon {
  width: 60rpx; /* 从80rpx改为60rpx，与resume.vue一致 */
  height: 60rpx; /* 从80rpx改为60rpx，与resume.vue一致 */
  margin-right: 24rpx;
  border-radius: 0; /* 移除圆角，与resume.vue一致 */
}

.resume-info {
  flex: 1;
}

.resume-name {
  font-size: 28rpx; /* 从32rpx改为28rpx，与resume.vue的14px一致 */
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.resume-meta {
  font-size: 24rpx; /* 从26rpx改为24rpx，与resume.vue的12px一致 */
  color: #999;
}

.resume-item__right {
  margin-left: 24rpx;
}

.selection-indicator {
  width: 36rpx; /* 从40rpx改为36rpx，稍微缩小 */
  height: 36rpx; /* 从40rpx改为36rpx，稍微缩小 */
  border-radius: 50%;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.selection-indicator--selected {
  background: #28a745; /* 更深的绿色 */
  border-color: #28a745;
}

.empty-resume {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 16rpx;
}

.popup-footer {
  padding: 32rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: 500;
}